<template>
    <div class="boxLine">
        <div class="title">
            <p class="">近一周人流量图</p>
            <img src="../../images/dataScreen-title.png" alt="">
        </div>
        <div class="echart" ref="echart"></div>
    </div>
</template>

<script setup lang='ts'>
import { onMounted, ref } from 'vue';
import *as echarts from 'echarts'

let echart=ref()
onMounted(()=>{
    let myEchart=echarts.init(echart.value)
    myEchart.setOption({
        grid:{
            left:'40px',
            right:'0px',
            top:'30px',
            bottom:'30px',
        },
        tooltip: {
            trigger: 'axis',  // 触发类型，'axis' 表示鼠标悬停在坐标轴上时显示
            axisPointer: {    // 坐标轴指示器样式
            type: 'line'    // 'line' 直线指示器 | 'shadow' 阴影指示器 | 'none' 无指示器
            }
        },
        xAxis:{
            type:'category',
            axisLine:{
                show : true
            },
            splitLine:{
                show:false
            },
            boundaryGap:false,
            
        },
        yAxis:{
            boundaryGap:false,
            axisLine:{
                show : true
            },
            splitLine:{
                show:false
            }
        },
        series:[
            {
                type:'line',
                data:[1897, 114, 1044, 2490, 1562, 2829, 2073, 1922, 2224, 2701, 2287, 132, 1377, 244, 2335, 2000, 1753, 2632, 882, 2107, 1511, 2530, 1630, 2897, 184, 2726, 1407, 2143, 2219, 2424],
                smooth:true,
                symbol :'none',
                areaStyle:{
                    color:{
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 0.8,
                        colorStops: [{
                            offset: 0, color: 'RGB(254, 54, 44)' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'RGB(254, 54, 44,0.1)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
                encode: {
                    x: 'Year',
                    y: 'Income',
                    itemName: 'Year',
                    tooltip: ['Income']
                }
                
            }
        ],
        animationDuration:2000
    })
})
</script>

<style scoped lang='scss'>
    .boxLine{
        flex: 1;
        background: url('../../images/dataScreen-main-cb.png') no-repeat;
        background-size: 100% 100%;
        .title{
            margin-left: 10px;
            p{
                color: white;
                font-size: 20px;
            }
            
        }
        .echart{
            width: 100%;
            height: calc(100% - 40px);
            
        }
    }
</style>